<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
   <link rel="stylesheet" href="../css/swiper-bundle.min.css"> 
   <script src="./swiper-bundle.min.js"></script>
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="wrap clearfix">
            <div class="logo">
                <img src="../image/logo/bslogo.jpg" alt="">
            </div>
            <nav >
                <ul>
                    <li class="active"><a href="./index.html">首页</a></li>
                    <li><a href="./news.html">新闻</a></li>
                    <li><a href="./mask.html">图片</a</li>
                    <li><a href="#">视频</a></li>
                </ul>
            </nav>
            <div class="search">
                <input type="text" placeholder="输入查找内容">
            </div>
            <div class="denglu">
                <span>登录</span>/
                <span>注册</span>
            </div>
        </div>
        
    </header>

    <!-- 主体部分 -->
    <main>
        <div class="wrap">
            <!-- 轮播图 -->
            <div class="banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../image/banner/bg2.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../image/banner/bg3.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../image/banner/bg4.jpg" alt="">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    
                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
            </div>
             
            <!-- 模块 -->
            <div class="moudle">
                <div class="left">
                    <img src="../image/bg/bg2.jpg" alt="">
                </div>
                <ul>
                    <li>
                        <img src="../image/bg/bg11.jpg" alt="">
                    </li>
                    <li>
                        <img src="../image/bg/bg11.jpg" alt="">
                    </li><li>
                        <img src="../image/bg/bg11.jpg" alt="">
                    </li><li>
                        <img src="../image/bg/bg11.jpg" alt="">
                    </li><li>
                        <img src="../image/bg/bg11.jpg" alt="">
                    </li><li>
                        <img src="../image/bg/bg11.jpg" alt="">
                    </li><li>
                        <img src="../image/bg/bg11.jpg" alt="">
                    </li><li>
                        <img src="../image/bg/bg11.jpg" alt="">
                    </li>
                </ul>
            </div>

            <div class="tour">
                <div  class="bg"><img src="../image/bg/bg13.jpg" alt="">
                <div class="left">早订20天减2000元</div>
                <div class="bottom">英国-伦敦 4天3晚 自由行</div>
                </div>
                <div class="js">
                    <p class="p1">伦敦古典名宿+伦敦休闲五日，体验别样的异国生活，赠送伦敦纪念币和伦敦合影图集+雪景水晶球</p>
                    </div>
                    <div class="foot">
                    <p class="p2"><span>￥</span>19990 <span>起</span></p>
                    <p class="p3">立即预约</p>
                    </div>
            </div>
        </div>
    </main>

    <!-- 侧边导航 -->
    <aside>
        <div>Top</div>
    </aside>

    <!-- 底部导航 -->
    <footer>
        <div class="wrap">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    autoplay:{
        stopOnlastSlide:true
    },
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</script>
   
</body>
</html>